<template>
    <BasicPopup v-bind="$attrs" @register="registerPopup" :title="title" destroyOnClose>
        <template #insertFooter>
        </template>
        <!-- 表单 -->
        <a-row class="dynamic-form ">
            <a-form :colon="false" size="default" layout="horizontal" labelAlign="right"
                :labelCol="{ style: { width: '100px' } }" :model="dataForm" ref="formRef">
                <a-row :gutter="15">
                    <!-- 具体表单 -->
                    <a-col :span="24" class="ant-col-item">
                        <a-form-item>
                            <JnpfGroupTitle contentPosition="left" content="项目初审" style="margin-left: 8px;">
                            </JnpfGroupTitle>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="ant-col-item" v-if="hasFormP('projectName')">
                        <a-form-item name="projectName">
                            <template #label>项目名称</template>
                            <JnpfInput v-model:value="dataForm.projectName" placeholder="请输入" disabled detailed
                                allowClear :style='{ "width": "100%" }' :maskConfig="maskConfig.projectName">
                            </JnpfInput>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8" class="ant-col-item" v-if="hasFormP('companyId')">
                        <a-form-item name="companyId">
                            <template #label>投资标的</template>
                            <p>{{ dataForm.companyId }}</p>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="4" class="ant-col-item">
                        <a-form-item>
                            <JnpfButton align="left" buttonText="新增标的">
                            </JnpfButton>
                        </a-form-item>
                    </a-col> -->
                    <a-col :span="12" class="ant-col-item" v-if="hasFormP('projectType')">
                        <a-form-item name="projectType">
                            <template #label>项目类型</template>
                            <p>{{ dataForm.projectType }}</p>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="ant-col-item" v-if="hasFormP('parentProjectId')">
                        <a-form-item name="parentProjectId">
                            <template #label>父项目ID</template>
                            <p>{{ dataForm.parentProjectId }}</p>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="ant-col-item" v-if="hasFormP('partner')">
                        <a-form-item name="partner">
                            <template #label>管理人</template>
                            <p>{{ dataForm.partner }}</p>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="ant-col-item" v-if="hasFormP('manager')">
                        <a-form-item name="manager">
                            <template #label>项目负责人</template>
                            <p>{{ dataForm.manager }}</p>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="ant-col-item" v-if="hasFormP('source')">
                        <a-form-item name="source">
                            <template #label>项目来源</template>
                            <JnpfInput v-model:value="dataForm.source" placeholder="请输入" disabled detailed allowClear
                                :style='{ "width": "100%" }' :maskConfig="maskConfig.source">
                            </JnpfInput>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="ant-col-item" v-if="hasFormP('flowType')">
                        <a-form-item name="flowType">
                            <template #label>流程状态</template>
                            <p>{{ dataForm.flowType }}</p>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" class="ant-col-item" v-if="hasFormP('accessory')">
                        <a-form-item name="accessory">
                            <template #label>项目资料附件</template>
                            <JnpfUploadFile v-model:value="dataForm.accessory" disabled detailed :fileSize="500"
                                sizeUnit="MB" :limit="9" pathType="defaultPath" timeFormat="YYYY" buttonText="点击上传">
                            </JnpfUploadFile>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" class="ant-col-item" v-if="hasFormP('projectProfile')">
                        <a-form-item name="projectProfile">
                            <template #label>项目简介</template>
                            <p>{{ dataForm.projectProfile }}</p>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" class="ant-col-item" v-if="hasFormP('preliminaryOpinion')">
                        <a-form-item name="preliminaryOpinion">
                            <template #label>初审意见</template>
                            <p>{{ dataForm.preliminaryOpinion }}</p>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" class="ant-col-item" v-if="hasFormP('preliminaryOpinionFile')">
                        <a-form-item name="preliminaryOpinionFile">
                            <template #label>初审意见附件</template>
                            <JnpfUploadFile v-model:value="dataForm.preliminaryOpinionFile" disabled detailed
                                :fileSize="500" sizeUnit="MB" :limit="9" pathType="defaultPath" timeFormat="YYYY"
                                buttonText="点击上传">
                            </JnpfUploadFile>
                        </a-form-item>
                    </a-col>
                    <!-- 表单结束 -->
                </a-row>
            </a-form>
        </a-row>
    </BasicPopup>
    <!-- 有关联表单详情：开始 -->
    <RelationDetail ref="relationDetailRef" />
    <!-- 有关联表单详情：结束 -->
</template>
<script lang="ts" setup>
import { getDetailInfo } from './helper/api';
import { getConfigData } from '/@/api/onlineDev/visualDev';
import { reactive, toRefs, nextTick, ref, computed, unref, toRaw } from 'vue';
import { BasicPopup, usePopup } from '/@/components/Popup';
import { BasicModal, useModal } from '/@/components/Modal';
// 有关联表单详情
import RelationDetail from '/@/views/common/dynamicModel/list/detail/index.vue';
// 表单权限
import { usePermission } from '/@/hooks/web/usePermission';
import { useMessage } from '/@/hooks/web/useMessage';
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { buildUUID } from '/@/utils/uuid';

interface State {
    dataForm: any;
    title: string;
    maskConfig: any;
    locationScope: any;
}

defineOptions({ name: 'Detail' });
const { createMessage, createConfirm } = useMessage();
const [registerPopup, { openPopup, setPopupProps, closePopup }] = usePopup();

const relationDetailRef = ref<any>(null);
const state = reactive<State>({
    dataForm: {},
    title: '详情',
    maskConfig: {
        projectName: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
        source: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
    }
    ,
    locationScope: {
    }
    ,
});
const { title, dataForm, maskConfig } = toRefs(state);
// 表单权限
const { hasFormP } = usePermission();


defineExpose({ init });

function init(data) {
    state.dataForm.id = data.id;
    openPopup();
    nextTick(() => {
        setTimeout(initData, 0);
    });
}
function initData() {
    changeLoading(true);
    if (state.dataForm.id) {
        getData(state.dataForm.id);
    } else {
        closePopup();
    }
}
function getData(id) {
    getDetailInfo(id).then((res) => {
        state.dataForm = res.data || {};
        nextTick(() => {
            changeLoading(false);
        });
    });
}

function toDetail(modelId, id) {
    if (!id) return;
    getConfigData(modelId).then((res) => {
        if (!res.data || !res.data.formData) return;
        const formConf = JSON.parse(res.data.formData);
        formConf.popupType = 'general';
        const data = { id, formConf, modelId };
        relationDetailRef.value?.init(data);
    });
}
function setFormProps(data) {
    setPopupProps(data);
}
function changeLoading(loading) {
    setFormProps({ loading });
}

</script>


<style lang="css">

</style>
